<template>
    <div id="shoplist">
        <div class="shop-head-1">
            <div class="shop-center980">
                <h2>全部商品</h2>
            </div>
        </div>

        <div class="shop-head-2">
            <div class="shop-center980">
                <div>
                    <h1 class="shop-head2-text">商品列表</h1>
                </div>
            </div>
        </div>

        <div class="shop-all">
            <div class="shop-center1440" v-if="data">
                <div class="shop-all-list">
                    <ul>
                        <li v-for="(item,i) in data" :key="i">
                            <img :src="item.toListImg" />
                            <router-link :to="item.linkto">{{item.toListTitle}}</router-link>
                            <p>RMB {{item.toListPrice}} 起</p>
                        </li>
                        <!-- <li>
                            <img src="img/shop-airpos3.jfif" />
                            <a href="">AirPods (第三代)</a>
                            <p>RMB 1,399</p>
                        </li>-->
                    </ul>
                </div>
                <div class="shop-pagenav">
                    <div class="shop-page-arrow">
                        <a @click="page==1?page:page--" >&lt;</a>
                    </div>
                    <div class="shop-page-spacing">
                        <!-- <input type="text" value="1" v-model="page"/> -->
                        <input type="text" value="1" v-model="page"/>
                        of
                        <span>{{pageCount}}</span>
                    </div>
                    <div class="shop-page-arrow">
                        <a @click="page==pageCount?page:page++">></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
  watch: {
    page(to, from) {
      document.documentElement.scrollTop = 0;
      if(to>this.pageCount || to < 0 || to==''){
        // this.page = 1;
        return;
      }
      this.data = [];
      this.getData();
    },
  },
  data() {
    return {
      data: null,
      page:1,
      pageCount:0,
      pageSize:9,
    }
  },
  mounted () {
    this.getFirstData();
  },
methods: {
  getFirstData(){
    let url = `http://localhost:3000/product`;
    axios.get(url)
    .then(res=>{return res;})
    .then(res=>{
      let c = Math.ceil(res.data.length / this.pageSize);
      this.pageCount = c;
    })
    .then(res=>{this.getData()})
    
  },
  getData() {
    // let url = `http://localhost:3000/product`
    //分页地址，获取第一页，每一页有9项
    let url2 = `http://localhost:3000/product?_page=${this.page}&_limit=${this.pageSize}`
    axios.get(url2)
    .then(res=>{return res;})
    .then(res=>{this.data = res.data})
    // .then(res=>{console.log(this.data)})
  }
},

};
</script>

<style lang="less" scoped>
#shoplist {
    width: 100%;
    height: 100%;
}
</style>
<style scoped src="../assets/css/shoplist.css"></style>